<template>
	<div class="richtext-card">
		<div class="card-title" v-if="title && hideTitle==false">
			{{title}}
		</div>
		<div class="card-content" :style="{padding:padding}">
			<div v-html="content">

			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'ActRichText',
		props: {
			padding: {
				type: String,
				default: '0px'
			},
			title: {
				type: String,
				default: '富文本编辑器'
			},
			hideTitle: {
				type: Boolean,
				default: false
			},
			content: {
				type: String,
				default: '内容'
			}
		}
	}
</script>
<style scoped lang="scss">
	.richtext-card {
		width: 360px;
		margin: 7.5px 7.5px;
		background-color: #FFF;
		border-radius: 7.5px;
		display: flex;
		flex-direction: column;
		border: 1px solid #eee;
		position: relative;

		.card-title {
			font-size: 18px;
			font-weight: 900;
			padding-left: 10px;
			line-height: 40px;
			height: 40px;
			border-bottom: 1px solid #eee;
		}

		.card-content {
			padding: 0px 7.5px;
		}

		.card-content :deep(img) {
			max-width: 345px;
			height: auto;
		}
	}
</style>
